<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>订阅</title>
        <style>
            @media (min-width:240px) and (max-width:320px){html{font-size:12.8px!important}}
            @media (min-width:321px) and (max-width:360px){html{font-size:14.4px!important}}
            @media (min-width:361px) and (max-width:375px){html{font-size:15px!important}}
            @media (min-width:376px) and (max-width:384px){html{font-size:15.36px!important}}
            @media (min-width:385px) and (max-width:414px){html{font-size:16.56px!important}}
            @media (min-width:415px) and (max-width:450px){html{font-size:18px!important}}
            @media (min-width:451px) and (max-width:500px){html{font-size:20px!important}}
            @media (min-width:501px) and (max-width:550px){html{font-size:22px!important}}
            @media (min-width:551px) and (max-width:569px){html{font-size:22.72px!important}}
            @media (min-width:569px) and (max-width:640px){html{font-size:25.6px!important}}
            @media (min-width:641px) and (max-width:667px){html{font-size:26.68px!important}}
            @media (min-width:668px) and (max-width:736px){html{font-size:29.44px!important}}
            @media (min-width:738px) and (max-width:768px){html{font-size:30.72px!important}}
            @media (min-width:769px) and (max-width:900px){html{font-size:36px!important}}
            @media (min-width:901px) and (max-width:1080px){html{font-size:43.24px!important}}

            .container{width:100%; text-align: center; display:flex; flex-direction: column; align-items: center; margin-top:10rem;}
            .container .controls{ border:solid 1px #3385ff; display:flex;  }
            .container .controls #email{ border:none; padding:0px 10px; font-size:16px; width:15rem; height:40px; }
            .container .controls #submit{ border:none;  height:40px; width:5rem; background:#3385ff; color:#fff;}

        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="title">获得疫情最新状况</h1>
            <form onsubmit="return submitCallback();" >
                <div class="controls">
                    <input id="email" name="email" type="email" placeholder="请输入订阅邮箱" />
                    <button id="submit" >确定</button>
                </div>
            </form>
        </div>
        <script>
            function submitCallback() {
                ajax({
                    url : '/add',
                    type : 'get',
                    data : {
                        email : document.getElementById('email').value
                    },
                    success : function(res) {
                        res = JSON.parse(res)
                        alert(res.msg)
                    }
                })
                return false;
            }

            function ajax(json){
                if(window.XMLHttpRequest){
                    var ajax = new XMLHttpRequest();
                } else{
                    var ajax = new ActiveXObject( "Microsoft.XMLHTTP" );
                }

                if(json.type=='get'){
                    ajax.open('get',json.url+'?'+JsonToString(json.data),true);
                    ajax.send();
                } else if(json.type=='post'){
                    ajax.open('post',json.url,true);
                    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    ajax.send(JsonToString(json.data));
                }

                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status>=200 && ajax.status<300 || ajax.status == 304){
                            json.success(ajax.responseText);

                        }
                        else{
                            json.error && json.error();
                        }
                    };
                };


                function JsonToString(json){
                    var arr = [];
                    for(var i in json){
                        arr.push(i+'='+json[i]);
                    };
                    return arr.join('&');
                }
            }
        </script>
    </body>
</html>